<template>
  <view class="container">
    <!-- 列表内容区域 -->
    <view class="list-container">
      <view 
        class="student-card" 
        v-for="(student, index) in studentList" 
        :key="student.id"
        :animation="cardAnimations[index]"
        @click="showStudentDetail(student)"
      >
        <view class="card-header">
          
          <view class="info-container">
            <view class="name-row">
              <text class="name">{{ student.name }}</text>
              <text class="status-tag" >{{ getStatusText(student.status) }}</text>
            </view>
            <view class="contact-row">
              <text class="phone">{{ student.phone }}</text>
              <text class="gender">{{ getGenderText(student.gender) }}</text>
            </view>
          </view>
        </view>
        
        <view class="card-body">
          <view class="item-row">
            <text class="label">专业:</text>
            <text class="value">{{ student.major || '-' }}</text>
          </view>
          <view class="item-row">
            <text class="label">来源渠道:</text>
            <text class="value">{{ student.source || '-' }}</text>
          </view>
          <view class="item-row">
            <text class="label">报名学校:</text>
            <text class="value">{{ student.target_college || '-' }}</text>
          </view>
        </view>
        
        <view class="card-footer">
          <text class="create-time">创建于 {{ formatDate(student.create_time) }}</text>
          <uni-icons type="arrowright" size="14" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 加载提示 -->
      <view class="loading-more" v-if="loading">
        <uni-load-more status="loading" content-text="加载中..."></uni-load-more>
      </view>
      
      <!-- 没有更多数据 -->
      <view class="no-more-data" v-if="!loading && hasMore === false && studentList.length > 0">
        <text>已经到底啦</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="studentList.length === 0 && !loading">
        <text class="empty-text">暂无报名记录</text>
      </view>
    </view>
    
    <!-- 详情弹窗 -->
    <view class="detail-modal-mask" v-if="detailVisible" @click="closeDetail"></view>
    <view class="detail-modal-container" v-if="detailVisible">
      <view class="detail-modal-content">
        <view class="detail-header">
         
          <view class="detail-info-container">
            <view class="detail-name-row">
              <text class="detail-name">姓名：{{ detailStudent.name }}</text>
            </view>
            <view class="detail-contact-row">
              <text class="detail-phone">电话：{{ detailStudent.phone }}</text>
              <text class="detail-gender">{{ getGenderText(detailStudent.gender) }}</text>
              <text class="detail-birthday">{{ formatDate(detailStudent.birthday, 'YYYY-MM-DD') || '未填写' }}</text>
            </view>
            <view class="detail-status-row">
              <text class="detail-status-tag" >{{ getStatusText(detailStudent.status) }}</text>
              <text class="detail-create-time">创建于 {{ formatDate(detailStudent.create_time) }}</text>
            </view>
          </view>
          <view class="detail-close" @click="closeDetail">
            <uni-icons type="close" size="20"></uni-icons>
          </view>
        </view>
        
        <view class="detail-body">
          <view class="detail-section">
            <text class="section-title">基本信息</text>
            <view class="detail-item">
              <text class="detail-label">身份证号:</text>
              <text class="detail-value">{{ formatIdCard(detailStudent.id_card) || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">电子邮箱:</text>
              <text class="detail-value">{{ detailStudent.email || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">联系地址:</text>
              <text class="detail-value">{{ detailStudent.address || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">微信:</text>
              <text class="detail-value">{{ detailStudent.wx || '未填写' }}</text>
            </view>
          </view>
          
          <view class="detail-section">
            <text class="section-title">教育背景</text>
            <view class="detail-item">
              <text class="detail-label">当前学历:</text>
              <text class="detail-value">{{ getEducationText(detailStudent.education) || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">毕业院校:</text>
              <text class="detail-value">{{ detailStudent.graduate_school || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">专业:</text>
              <text class="detail-value">{{ detailStudent.major || '未填写' }}</text>
            </view>
          </view>
          
          <view class="detail-section">
            <text class="section-title">报名信息</text>
            
            <view class="detail-item">
              <text class="detail-label">来源渠道:</text>
              <text class="detail-value">{{ detailStudent.source || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">报名学校:</text>
              <text class="detail-value">{{ detailStudent.target_college || '未填写' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据列表
      studentList: [],
      page: 1,
      pageSize: 10,
      loading: false,
      hasMore: true,
      
      // 详情弹窗
      detailVisible: false,
      detailStudent: {},
      
      // 动画相关
      cardAnimations: [],
      
      // 枚举数据
      statusOptions: [
        { value: '0', label: '无效' },
        { value: '1', label: '潜在' },
        { value: '2', label: '意向' },
        { value: '3', label: '已报名' },
        { value: '4', label: '已毕业' }
      ],
      
      sourceOptions: [
        { value: '1', label: '官网' },
        { value: '2', label: '社交媒体' },
        { value: '3', label: '线下活动' },
        { value: '4', label: '电话咨询' },
        { value: '5', label: '朋友推荐' },
        { value: '6', label: '广告投放' },
        { value: '7', label: '其他' }
      ],
      
      educationOptions: [
        { value: '1', label: '高中及以下' },
        { value: '2', label: '大专' },
        { value: '3', label: '本科' },
        { value: '4', label: '硕士' },
        { value: '5', label: '博士及以上' }
      ]
    }
  },
  
  onLoad() {
    this.loadStudentList();
  },
  
  onReachBottom() {
    if (!this.loading && this.hasMore) {
      this.loadMoreStudents();
    }
  },
  
  onPullDownRefresh() {
    this.refreshList();
  },
  
  methods: {
    // 加载学生列表
    async loadStudentList() {
      this.loading = true;
      const res = await this.$api.get('/StudentsSchool/studentsList',true)
	  if(res.data.code === 200) {
		  this.loading = false;
		  this.studentList = res.data.data
		  uni.stopPullDownRefresh();
	  }
      
    },
    
    // 加载更多学生
    loadMoreStudents() {
      this.page++;
      this.loadStudentList();
    },
    
    // 刷新列表
    refreshList() {
      this.page = 1;
      this.hasMore = true;
      this.loadStudentList();
    },
    
    // 生成模拟数据
    generateMockData(page, pageSize) {
      const start = (page - 1) * pageSize + 1;
      const end = start + pageSize - 1;
      const list = [];
      
      for (let i = start; i <= end; i++) {
        const gender = Math.floor(Math.random() * 3);
        const status = Math.floor(Math.random() * 5);
        const source = Math.floor(Math.random() * 7) + 1;
        const education = Math.floor(Math.random() * 5) + 1;
        
        list.push({
          id: i.toString().padStart(6, '0'),
          name: gender === 1 ? `张${['伟', '强', '杰', '军', '峰'][Math.floor(Math.random() * 5)]}` : `李${['娜', '婷', '静', '佳', '雪'][Math.floor(Math.random() * 5)]}`,
          gender: gender,
          birthday: this.getRandomDate('1980-01-01', '2005-12-31'),
          phone: `13${Math.floor(Math.random() * 900000000 + 100000000)}`,
          email: `user${i}@example.com`,
          id_card: `110101${Math.floor(Math.random() * 90000000000000 + 10000000000000)}`,
          address: `北京市朝阳区${['建国路', '朝阳路', '三里屯', '亚运村'][Math.floor(Math.random() * 4)]}${Math.floor(Math.random() * 100 + 1)}号`,
          education: education,
          graduate_school: `${['北京大学', '清华大学', '复旦大学', '上海交通大学', '浙江大学'][Math.floor(Math.random() * 5)]}`,
          major: `${['计算机科学', '电子工程', '金融', '市场营销', '机械工程', '化学工程'][Math.floor(Math.random() * 6)]}`,
          intention_major: `${['MBA', '计算机技术', '软件工程', '会计学', '法学', '教育学'][Math.floor(Math.random() * 6)]}`,
          source: source,
          status: status,
          create_time: this.getRandomDate('2023-01-01', new Date().toISOString().split('T')[0]),
          update_time: new Date().toISOString().split('T')[0] + ' ' + new Date().toTimeString().split(' ')[0],
          target_college: `${['新东方', '学而思', '环球雅思', '中公教育', '尚德机构'][Math.floor(Math.random() * 5)]}教育学院`,
          wx: `wxid_${Math.random().toString(36).substr(2, 10)}`
        });
      }
      
      return list;
    },
    
    // 获取随机日期
    getRandomDate(start, end) {
      const startDate = new Date(start);
      const endDate = new Date(end);
      const randomDate = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));
      return randomDate.toISOString().split('T')[0];
    },
    
    // 添加卡片进入动画
    addEnterAnimations() {
      const newCards = this.studentList.slice(this.cardAnimations.length);
      const newAnimations = newCards.map((_, index) => {
        const animation = uni.createAnimation({
          duration: 300,
          timingFunction: 'ease-out'
        });
        
        animation
          .translateY(20)
          .opacity(0)
          .step();
          
        animation
          .translateY(0)
          .opacity(1)
          .step({ duration: 300, delay: index * 50 });
          
        return animation.export();
      });
      
      this.cardAnimations = [...this.cardAnimations, ...newAnimations];
    },
    
    // 显示学生详情
    showStudentDetail(student) {
      this.detailStudent = JSON.parse(JSON.stringify(student));
      this.detailVisible = true;
      
      // 添加弹窗动画
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease-out'
      });
      
      animation
        .scale(0.95)
        .opacity(0)
        .step();
        
      animation
        .scale(1)
        .opacity(1)
        .step({ duration: 300 });
        
      this.detailAnimation = animation.export();
    },
    
    // 关闭详情
    closeDetail() {
      this.detailVisible = false;
    },
    
    // 获取性别文本
    getGenderText(gender) {
      switch (gender) {
        case 1: return '男';
        case 2: return '女';
        default: return '未知';
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '0': '无效',
        '1': '已预约报名',
        '2': '意向',
        '3': '已报名',
        '4': '已毕业'
      };
      return statusMap[status] || '未知';
    },
    
    // 获取状态类名
    getStatusClass(status) {
      const statusClassMap = {
        '0': 'status-invalid',
        '1': 'status-potential',
        '2': 'status-intention',
        '3': 'status-enrolled',
        '4': 'status-graduated'
      };
      return statusClassMap[status] || '';
    },
    
    // 获取来源文本
    getSourceText(source) {
      const sourceMap = {
        '1': '官网',
        '2': '社交媒体',
        '3': '线下活动',
        '4': '电话咨询',
        '5': '朋友推荐',
        '6': '广告投放',
        '7': '其他'
      };
      return sourceMap[source] || '';
    },
    
    // 获取学历文本
    getEducationText(education) {
      const educationMap = {
        '1': '高中及以下',
        '2': '大专',
        '3': '本科',
        '4': '硕士',
        '5': '博士及以上'
      };
      return educationMap[education] || '';
    },
    
    // 获取头像URL
    
    
    // 格式化日期
    formatDate(dateStr, format = 'YYYY-MM-DD HH:mm') {
      if (!dateStr) return '';
      
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      if (format === 'YYYY-MM-DD') {
        return `${year}-${month}-${day}`;
      }
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    
    // 格式化身份证号
    formatIdCard(idCard) {
      if (!idCard) return '';
      return idCard.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3');
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

// 列表区域
.list-container {
  padding: 15px;
  
  .student-card {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .card-header {
      display: flex;
      padding: 15px 15px 10px;
      
      .avatar-container {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 12px;
        
        .avatar {
          width: 100%;
          height: 100%;
        }
      }
      
      .info-container {
        flex: 1;
        
        .name-row {
          display: flex;
          align-items: center;
          
          .name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-right: 8px;
          }
          
          .id {
            font-size: 12px;
            color: #999;
          }
          
          .status-tag {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 8px;
			color: #f53f3f;
          }
        }
        
        .contact-row {
          display: flex;
          align-items: center;
          margin-top: 4px;
          
          .phone {
            font-size: 14px;
            color: #666;
          }
          
          .gender {
            font-size: 14px;
            color: #999;
            margin-left: 10px;
          }
        }
      }
    }
    
    .card-body {
      padding: 0 15px 10px;
      
      .item-row {
        display: flex;
        align-items: center;
        margin-top: 8px;
        
        .label {
          font-size: 13px;
          color: #999;
          width: 70px;
        }
        
        .value {
          font-size: 13px;
          color: #333;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    
    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      border-top: 1px solid #f5f5f5;
      
      .create-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
  
  .loading-more, .no-more-data {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: #999;
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    
    image {
      width: 120px;
      height: 120px;
      margin-bottom: 15px;
    }
    
    .empty-text {
      font-size: 16px;
      color: #999;
      margin-bottom: 20px;
    }
    
    .empty-btn {
      width: 120px;
      height: 40px;
      background-color: #007aff;
      color: #fff;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
  }
}

// 状态标签样式
.status-invalid {
  background-color: #fde6e8;
  color: #f53f3f;
}

.status-potential {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-intention {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-enrolled {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-graduated {
  background-color: #f0f2f5;
  color: #8c8c8c;
}

// 详情弹窗
.detail-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
}

.detail-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  overflow-y: auto;
  
  .detail-modal-content {
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    margin-top: 50px;
    min-height: calc(100vh - 50px);
    
    .detail-header {
      padding: 20px 15px;
      border-bottom: 1px solid #f5f5f5;
      position: relative;
      
      .detail-avatar-container {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px;
      }
      
      .detail-avatar {
        width: 100%;
        height: 100%;
      }
      
      .detail-info-container {
        flex: 1;
        
        .detail-name-row {
          display: flex;
          align-items: center;
          
          .detail-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-right: 10px;
          }
          
          .detail-id {
            font-size: 13px;
            color: #999;
          }
        }
        
        .detail-contact-row {
          display: flex;
          align-items: center;
          margin-top: 5px;
          
          .detail-phone, .detail-gender, .detail-birthday {
            font-size: 14px;
            color: #666;
            margin-right: 15px;
          }
        }
        
        .detail-status-row {
          display: flex;
          align-items: center;
          margin-top: 8px;
          
          .detail-status-tag {
            font-size: 13px;
            padding: 3px 8px;
            border-radius: 4px;
            margin-right: 15px;
          }
          
          .detail-create-time {
            font-size: 13px;
            color: #999;
          }
        }
      }
      
      .detail-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0,0,0,0.1);
        border-radius: 50%;
      }
    }
    
    .detail-body {
      padding: 15px;
      
      .detail-section {
        margin-bottom: 20px;
        
        .section-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-bottom: 15px;
        }
        
        .detail-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          
          .detail-label {
            width: 85px;
            font-size: 14px;
            color: #666;
          }
          
          .detail-value {
            flex: 1;
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>